<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>我的年龄：{{age}}</p>
    <input type="text" v-model="age">
    <hr>
    <p>你的颜值：{{colorVal}}</p>
    <button @click="beBeautiful">变漂亮！</button>
    <hr>
    <span>yyqx的年龄：</span>
    <input type="text" v-model="person.age">
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        age: 17,
        colorVal: 50,
        person: {
          name: 'yyqx',
          age: 18
        }
      },
      watch: {
        // 一对多，一个根本原因的变化，造成其让数据的变化
        // 侦听器的函数形式：函数的名字就是要监听的数据。两个参数：newVal、oldVal
        age(newVal, oldVal) {
          console.log(newVal, oldVal);
          if(newVal == 69) {
            console.log('偷袭'+newVal+'岁的老同志，不讲武德！');
          }else if(newVal == 18) {
            console.log('你已经是成年人了，可以做一些成年人做的事了....');
          }
        },
        colorVal(val) {
          if(val < 60) {
            alert('小丑竟是我自己')
          }else if(val == 80) {
            alert('易烊千玺的回眸')
          }else if(val == 90) {
            alert('易烊千玺的官宣');
            this.weiboDown()
          }else if(val == 100) {
            alert('返回天庭');
          }
        },
        // 对象的形式，可以深度监听
        person: {
          handler(val) {
            console.log(val.age);
          },
          // 开启深监听
          deep: true
        }
      },
      methods: {
        beBeautiful() {
          this.colorVal += 5;
        },
        weiboDown() {
          alert('微博沦陷')
        }
      },
    })
  </script>
</body>
</html>